<template>
  <teleport to="#message">
    <div class="alert message-info fixed-top w-50  mx-auto d-flex justify-content-between mt-2" :class="classObject"
      v-if="isShow">
      <span class="w-100 d-block text-center">{{ message }}</span>
      <!-- <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" @click.prevent="hide"></button> -->
    </div>
  </teleport>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import useDOMCreate from '../hooks/useDOMCreate';
export type MessageType = 'success' | 'error' | 'default'
export interface Props {
  message: string
  type: MessageType
}
useDOMCreate('message')
// 是否显示
const isShow = ref(true)
// 颜色
const props = defineProps<Props>()
const classObject = {
  'alert-success': props.type === 'success',
  'alert-danger': props.type === 'error',
  'alert-primary': props.type === 'default'
}
const hide = () => {
  isShow.value = false
}
</script>